<template>
  <div class="qy">
    <div class="qinyou">
      <div class="icon">
        <slot name="icon"></slot>
      </div>
      <div class="contentView">
        <slot name="content"></slot>
      </div>
      <div class="to">
        <slot name="to"></slot>
      </div>
    </div>
    <div class="tool">
      <slot name="tool"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: "qinyou",
    data() {
      return {};
    }
  };
</script>
<style lang="scss" scoped>
  .qy {
    background: #ffffff;
    padding-left: 10px;
    padding-top: 15px;
  }
  .qinyou {
    display: flex;
    flex-flow: row;
    /*伸缩项目单行排列*/
    padding: 0px 0 10px 0px;
    align-items: center;
    /*垂直居中*/
    border-bottom: 1px solid #eee;
    .icon {
      width: 100px;
      img {
        display: block;
        width: 100px;
        height: 100px
      }
    }
    .contentView {
      flex: 1;
      margin: 0 0 0 10px;
      overflow: hidden;
      p {
        white-space: nowrap;
        overflow: hidden;
        font-size: 14px;
        line-height: 1.4;
        color: #c0c0c0;
      }
    }
    .to {
      width: 20px;
      text-align: center;
    }
  }
  .tool {
    padding: 10px 0;
    button {
      margin: 0 10px 0 0px;
    }
  }
</style>

